<template>
  <div id="login" ref="homePage">
    <img src="../assets/logo.png" class="logo" alt="达亮出行">
    <h2 class="logoTitle">达亮出行后台管理系统</h2>
    <h1 class="title">达亮出行后台管理系统</h1>
    <div class="loginBox">
      <p>
        <el-input prefix-icon="el-icon-user-solid" v-model="loginValue.loginName" placeholder="请输入内容" style="width: 100%;"></el-input>
      </p>
      <p>
        <el-input
          prefix-icon="el-icon-key"
          v-model="loginValue.passWord"
          placeholder="请输入内容"
          style="width: 100%;"
          show-password
        ></el-input>
      </p>
      <el-button type="primary" class="loginButton" @click="login()">登录</el-button>
    </div>
  </div>
</template>

<script>
import request from '@/utils/request'
import { Message } from 'element-ui'

export default {
  data () {
    return {
      loginValue: {
        loginName: '',
        passWord: ''
      }
    }
  },
  mounted () {},
  watch: {},
  methods: {
    login () {
      request({
        url: '/auth/login',
        method: 'post',
        data: this.loginValue
      }).then(res => {
        // console.log(res)
        if (res.code === '00000000') {
          // console.log(1)
          Message({
            message: '登录' + res.message,
            type: 'success',
            duration: 2000
          })
          // for (let i = 0; i < res.data.menuVoList.length; i++) {
          //   if (res.data.menuVoList[i].rootMenu.webUrl !== '') {
          //     this.$store.state.routeList.push(res.data.menuVoList[i].rootMenu)
          //   }
          // }
          this.$store.state.routeList = res.data.menuVoList
          console.log(res.data.menuVoList)
          this.$store.state.isLogin = true
          this.$router.push({
            name: 'index'
          })
          window.localStorage.setItem('islogin', true)
          // console.log(this.$store.state.isLogin)
        } else if (res.code === '17010105') {
          this.$router.push({
            name: 'index'
          })
        } else {
          Message({
            message: res.message,
            type: 'error',
            duration: 5 * 1000
          })
        }
      })
    }
  },
  created () {
    // console.log(window.localStorage.getItem('islogin'))
  }
}
</script>

<style scoped lang='less'>
#login {
  position: relative;
  width: 100%;
  height: 100%;
  // background-color: #dbbe7d;
  background-image: url('../assets/7521310.jpg');
  background-size: 100% 100%;
}
.title {
  position: absolute;
  top: 150px;
  left: 50%;
  transform: translateX(-50%);
  color: #ffffff;
  text-align: center;
}
.loginBox {
  position: absolute;
  top: 250px;
  left: 50%;
  transform: translateX(-50%);
  width: 300px;
  padding: 0 200px;
  height: 400px;
  text-align: center;
  span {
    font-weight: 700;
  }
  .loginButton {
    font-size: 20px;
    width: 150px;
    text-align: center;
    margin-top: 20px;
  }
}
.logo {
  position: fixed;
  top: 50px;
  left: 50px;
  width: 50px;
  height: 50px;
}
.logoTitle {
  position: fixed;
  top: 50px;
  left: 120px;
  color: #fff;
  font-size: 15px;
}
</style>
